<template>
  <section id="comment">
      <div slot="tab0">
        <div class="item-container" v-for="(item,index) in value" :key="index">
          <!-- 用户简单信息  -->
          <div class="top">
            <dynamic-author v-on:showBottomSheet="showBottomSheet" :index="index" :isComment="true" :value="item.member"/>
           
            <!-- 按钮-展开操作栏 -->
            
          </div>
          <!-- 评论内容 -->
          <div class="content">
            <div class="empty"></div>
            <div class="text" v-tap="{methods:goComment,id:item.id,name:item.member.nickname}">{{item.content}}</div>
            <div class="like">
              <div class="iconfont icon-ai45" v-tap="{methods:support,spaceCommentId:item.id,index:index,isSupport:item.isSupport}" :class="{active:item.isSupport =='1'}"></div>
              <span>{{item.supportCount}}</span>
            </div>
          </div>
          <div class="commentCount"  v-if="!isCommentTwo&&item.commentCount!='0'" v-tap="{methods:goComment,id:item.id,name:item.member.nickname}">
            <p>查看全部{{item.commentCount}}条评论</p>
          </div>
        </div>
      </div>
      <!-- 下方弹出框, 删除个人评论操作 -->
    <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
      <mu-list @itemClick="closeBottomSheet">
        <mu-list-item title="删除" class="bottom-btn" v-tap="{methods:delSpaceComment}" />
        <mu-list-item class="padding-btn" />
        <mu-list-item title="取消" class="bottom-btn cancel-btn" />
      </mu-list>
    </mu-bottom-sheet>
  </section>
</template>
<script>
import dynamicAuthor from './dynamic/dynamic_author'
import DeleteSpaceCommentService from "services/community/DeleteSpaceComment";
import CreateSpaceCommentSupport from "services/community/CreateSpaceCommentSupport";
export default {
  name:'comment',
  components: {
      dynamicAuthor
  },
  data () {
      return {
          bottomSheet : false,
          removeData : {},
          removeIndex : ''
      }
  },
  props:{
      value:{
          type:[Object,Array],
          default(){
              return []
          }
      },
      spaceId:'',
      isGoInfo:false, // 判断是否可以跳转
      isCommentTwo:false // 点击二级评论
  },
  methods:{
    goComment(params){
      if(this.$.userId){
        if(this.isCommentTwo){
        console.log('1111111')
        this.$emit('clickCommen',params.name)
        return
      }
      if(!this.isGoInfo){
        return
      }
      this.$router.push({
        name:'new_comment_info',
        params:{
          id:params.id,
          spaceId:this.spaceId
        }
      })
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
    },
       // 展示操作栏
    showBottomSheet(params) {
        params = JSON.parse(params)
        console.log(params)
      this.bottomSheet = true;
      this.removeData = params.removeData;
      this.removeIndex = params.removeIndex;
    },
    // 隐藏操作栏
    closeBottomSheet() {
      this.bottomSheet = false;
    },
    // 删除评论
    delSpaceComment() {
      // @TODO: 二次确认
      DeleteSpaceCommentService.bind(this)(
        {
          ids: [Number(this.value[this.removeIndex].id)]
        },
        resp => {
          this.value.splice(this.removeIndex, 1);
        },
        (err, resultCode) => {
          this.$.toast("删除评论失败");
        }
      );
      // 关闭操作框
      this.closeBottomSheet();
      this.$emit('delSpaceComment')
    },
    support(params){
        CreateSpaceCommentSupport.bind(this)({
          spaceCommentId:params.spaceCommentId,
          loading:'false'
        },res=>{
          if(this.value[params.index].isSupport === '0'){
            this.value[params.index].isSupport = '1'
            this.value[params.index].supportCount = Number(this.value[params.index].supportCount) + 1
          }else{
            this.value[params.index].isSupport = '0'
            this.value[params.index].supportCount = Number(this.value[params.index].supportCount) - 1
          }
          
        })
      
      
    }
  },
  computed: {
      
  }
}
</script>
<style lang="scss">
#comment{
  .content{
    display:flex;
    padding:4px;  
    align-items:center;
    .empty{
      -webkit-box-flex:1;
      flex:2 1 0;
    }
    .text{
          padding: 0.4em 0;
          flex:10 1 0;
          line-height: 16px;
    }
    .like{
      display: flex;
      flex: 1 0;
      padding-right: 5px;
      .icon-ai45{
        display: flex;
        font-size: 18px;
        color:#777;
        padding-left: 5px;
      }
      .icon-ai45.active{
        color:#f98700;
      }
      span{
        font-size: 12px;
        line-height: 16px;
        padding: 0 3px;
      }
    }
    
  }
  
}
.commentCount{
  height: 30px;
  line-height: 30px;
  padding-left: 15.5%;
  p{
    color: #1f99e4;
  }
}
.padding-btn{
    .mu-item{
      padding: 5px;
      border-top: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      height: 1px;
      min-height:5px;
    }
    
  }
  .bottom-btn{
    text-align: center;
    &.cancel-btn {
      color: #9e9e9e;
    }
  }
</style>


